import React,{PureComponent} from 'react'
class App extends PureComponent{

  state={
    inputValue:'',
    inputValue1:'',
    checked:false,
    radioChecked:false,
    textValue:'',
    selectValue:'',
    selectValue1:[]
  }

  inputChange=(e)=>{
    console.log(e.target.name)
    this.setState((preState)=>{
      return{
        inputValue:e.target.value
      }
    })
  }

  handInput=(e)=>{
    this.setState((preState)=>{
      return{
        inputValue1:e.target.value
      }
    })
  }

  handCheckbox=(e)=>{
    this.setState({
      checked:e.target.checked
    })
  }

  handleRadio=(e)=>{
    this.setState({
      radioChecked:e.target.checked
    })
  }

  textChange=(e)=>{
    this.setState({
      textValue:e.target.value
    })
  }

  handleSelect=(e)=>{
    this.setState({
      selectValue:e.target.value
    })
  }

  handleSelect1=(e)=>{
    this.state.selectValue1.push(e.target.value)
    console.log(this.state.selectValue1)
    this.setState({
      selectValue1:this.state.selectValue1
    })
  }
  render(){
    return(
      <div>
        <div>
        change事件<input type="text" value={this.state.inputValue} onChange={this.inputChange} name="text"></input>
        </div>
        <div>
        input事件<input type="text" value={this.state.inputValue1} onInput={this.handInput}></input>
        </div>
        <div>
          checkbox<input type="checkbox" checked={this.state.checked} onChange={this.handCheckbox}></input>
        </div>
        <div>
          男<input type="radio" checked={this.state.radioChecked} onChange={this.handleRadio} name="sex"></input>
          女<input type="radio" checked={this.state.radioChecked}
          onChange={this.handleRadio} name="sex"></input>
        </div>
        <div>
          <textarea value={this.state.textValue} onChange={this.textChange}>
          </textarea>
        </div>
        <div>

          <select value={this.selectValue} onChange={this.handleSelect}>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>

          <select value={this.selectValue1} onChange={this.handleSelect1} multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>

        </div>
      </div>
    )
  }
}
export default App